<template>
  <div :class="className" ref="chart" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts' // echarts theme
import resize from './mixins/resize'
import ResizeObserver from 'resize-observer-polyfill'

export default {
  mixins: [resize],
  props: {
    className: {
      // 为charts添加类名
      type: String,
      default: 'chart'
    },
    title: {
      // charts的标题
      type: String,
      default: ''
    },
    width: {
      // charts宽度
      type: String,
      default: '100%'
    },
    info: {
      // charts数据
      type: Array,
      default: () => {
        return []
      }
    },
    graphicText: {
      // charts的标题
      type: String,
      default: ''
    } // 任务总数
  },
  data() {
    return {
      chart: null, //保存的chart实例
      height: '280px', // charts高度
      radius: ['35%', '45%'], //饼图中心
      statusColor: ['#36cbcc', '#3aa0e1', '#9760e4', '#f2637b', '#f77234', '#a5a5a5 '] // 状态占比环形颜色
    }
  },
  mounted() {
    const self = this
    this.initChart()
    //窗口发生变化时触发
    let _ResizeObserver = window.ResizeObserver || ResizeObserver
    let observer = new _ResizeObserver(function() {
      self.__resizeHandler() //charts自适应
    })
    observer.observe(self.$refs['chart'])
  },
  watch: {
    // 数据发生变化时重绘charts
    info: function() {
      if (this.chart && this.info) {
        this.resizeHandler()
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // 销毁charts
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 饼图高度自适应
    resizeHandler() {
      let initheight = 480 //导航+body的边距=144，下面的pie图高度比上面多60，父盒子pdding(16+16)+titlt(21)=43*2=86
      // initheight=initheight<250?250:initheight
      // this.height=initheight+'px'
      this.radius = [initheight * 0.16, initheight * 0.24] //饼图中心位置跟随高度变化
      if (this.chart) {
        this.chart.setOption({
          color: this.statusColor, // 图像颜色
          graphic: {
            //资产总额显示跟随高度变化
            elements: [
              {
                type: 'text',
                left: '55px',
                top: initheight * 0.25,
                // center:,
                width: 150,
                style: {
                  width: 150,
                  text: '任务总数',
                  textAlign: 'center',
                  backgroundColor: '#fff',
                  fill: '#666',
                  font: '14px "Microsoft YaHei", sans-serif'
                }
              },
              {
                type: 'group',
                left: '55px',
                top: initheight * 0.31,
                width: 150,
                children: [
                  {
                    type: 'text',

                    style: {
                      width: 150,
                      textAlign: 'center',
                      backgroundColor: '#fff',
                      text: this.graphicText,
                      fill: '#333',
                      font: '24px "Microsoft YaHei", sans-serif',
                      shadowColor: 'rgba(0,0,0,0.3)'
                    }
                  },
                  {
                    type: 'text'
                  }
                ]
              }
            ]
          },
          legend: {
            //legend跟随高度和宽度变化
            orient: 'vertical',
            type: 'scroll',
            left: '50%',
            // right: 10,
            top: 38,
            itemGap: 20,
            formatter: name => {
              const data = this.info.find(item => item.status === name)
              return `{t|${name}} {l||} {r|${data.rate}}  {v|       ${data.sum}}`
            },
            textStyle: {
              fontSize: 14,
              rich: {
                t: {
                  width: 80,
                  color: '#5a5a5a'
                },
                l: {
                  width: 10,
                  color: '#929292'
                },
                r: {
                  width: 30,
                  color: '#929292'
                },
                v: {
                  width: 30,
                  color: '#5a5a5a'
                }
              }
            },
            // bottom: 20,
            data: this.info.map(item => {
              return {
                name: item.status,
                icon: 'circle',
                rate: item.rate,
                value: item.sum
              }
            })
          },
          series: [
            {
              type: 'pie',
              minAngle: 5,
              radius: this.radius,
              avoidLabelOverlap: false,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                borderWidth: 2,
                borderColor: '#fff'
              },
              // right: '60%',
              // top: initheight*0.04,
              center: ['130px', initheight * 0.3],
              // center: ['center', initheight*0.3],
              data: this.fixPieData()
            }
          ],
          tooltip: {
            show: true
          }
        })
      }
    },
    fixPieData() {
      let params = this.info.map(item => {
        return {
          name: item.status,
          value: item.sum
        }
      })
      let pieData = params.map(item => {
        if (item.value === 0) {
          item.value = null
        }
        return item
      })
      return pieData
    },
    // 初始化Chart
    initChart() {
      this.chart = echarts.init(this.$el)
      // this.chart = echarts.init()
      setTimeout(() => {
        this.resizeHandler()
      }, 1500)
    }
  }
}
</script>
